<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/login.css">
</head>

<body>
    <div class="nav">
        <div class="wrapper">
            <div class="left">
                <p class="fl logo">
                    <a href="javascript:;">
                        <img src="https://login.jiuxian.com/img/header/left.jpg?version=20160401" alt="">
                    </a>
                </p>
                <p class="fl">
                    <img src="https://login.jiuxian.com/img/reg/slogan.jpg
                    " alt="">
                </p>
            </div>
            <div class="right fr">
                <p>
                    欢迎来到酒仙网！
                    <a href="javascript:;">免费注册</a>
                </p>
                <div class="helpCenter">
                    <!-- <div class="Erji"> -->
                    <span>帮助中心</span>
                    <i></i>
                    <!-- </div> -->

                    <div class="helpErji">
                        <ul>
                            <li><a href="javascript:;">配送说明</a></li>
                            <li><a href="javascript:;">支付方式</a></li>
                            <li><a href="javascript:;">售后服务</a></li>
                            <li><a href="javascript:;">企业客户</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="banner">
        <div class="Login">
            <div class="acontLogin">
                <div class="changeEr">

                    
                    <div class="content1 on">
                        <div class="erweimaImg on">
                            <i></i>
                        </div>
                        <div class="acont on">
                            <div class="first">
                                <a href="javascript:;" class="on">帐号登录</a>
                                <span>|</span>
                                <a href="javascript:;">手机动态密码登录</a>
                            </div>
                            <div class="second">
                                <ul class="loginFirst on">
                                    <li>
                                        <div>
                                            <span><i></i></span>
                                            <input type="text" placeholder="用户名/邮箱/手机号" class="user">
                                            <b></b>
                                            <em></em>
                                        </div>
                                    </li>

                                    <li>
                                        <div>
                                            <span><i></i></span>
                                            <input type="password" placeholder="密码" class="pass">
                                            <b></b>
                                            <em></em>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <span><i></i></span>
                                            <input type="text" placeholder="验证码" class="yz">
                                            <b></b>
                                            <em></em>
                                            <p id="v_container"></p>
                                        </div>
                                    </li>
                                    <li><input type="button" class="loginBtn" value="登录"></li>
                                    <li>
                                        <a href="javascript:;">忘记密码</a>
                                        <a href="javascript:;" class="on">免费注册</a>
                                    </li>
                                </ul>
                                <ul class="loginSecond">
                                    <li>
                                        <span>手机号</span>
                                        <div>
                                            <span><i></i></span>
                                            <input type="text" maxlength="11" placeholder="手机号" class="user2">
                                            <b></b>
                                            <em></em>
                                        </div>
                                    </li>
                                    <li>
                                        <span>验证码</span>
                                        <div>
                                            <span><i></i></span>
                                            <input type="text" placeholder="验证码" class="pass2">
                                            <b></b>
                                            <em></em>
                                            <p id="v_container1"></p>

                                        </div>
                                    </li>
                                    <li>
                                        <span>校验码</span>
                                        <div>
                                            <div>
                                                <span><i></i></span>
                                                <input type="text" maxlength="6" class="jiaoyan">
                                                <b></b>
                                                <em></em>
                                            </div>
                                            <input type="button" class="phoneCode" value="获取短信验证码">
                                        </div>
                                    </li>
                                    <li><input type="button" class="loginBtn2" value="登录"></li>
                                    <li>
                                        <a href="javascript:;">忘记密码</a>
                                        <a href="javascript:;" class="on">免费注册</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="third">
                                <p>使用合作账号登录</p>
                                <div class="cooperateWay clearfix">
                                    <a class="qq" href="/union/qq.htm?from="><i></i></a>
                                    <a class="sina" href="/union/sina_login.htm?from="><i></i></a>
                                    <a class="aliPay" href="/union/alipay_login.htm?from=" name="fastlogin"><i></i></a>
                                    <a class="baidu" href="/union/baidu_login.htm?from="><i></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content2">
                        <div class="phoneImg">
                            <i></i>
                        </div>
                        <div class="saoma">
                            <div class="Top">
                                <h2>扫码登陆</h2>
                            </div>
                            <div class="middle">
                                <img src="https://login.jiuxian.com/scancode.htm?timestamp1646929927335" alt=""
                                    class="Move">
                                <div class="bj">
                                </div>
                                <div class="info">
                                    <p>二维码已失效</p>
                                    <a href="javascript:;">刷新</a>
                                </div>
                            </div>

                            <div class="middle2">
                                <img src="	https://login.jiuxian.com/img/reg/tip1.png" alt="">
                            </div>
                            <div class="bottom">
                                <i></i>
                                <p>
                                    打开
                                    <em>手机酒仙APP</em>
                                    <br>
                                    扫描二维码
                                </p>
                            </div>
                            <div class="bottom2">
                                <span><a href="javascript:;">
                                        账号密码登录
                                    </a>
                                    <a href="javascript:;">
                                        免费注册
                                    </a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="footer">
        <div class="footerContent">
            <p>© &nbsp;酒仙网&nbsp; 2011 jiuxian.com All &nbsp;Rights Reserved&nbsp;&nbsp;<a target="_blank"
                    href="#">京ICP证110141号</a>&nbsp;&nbsp;京公网安备1101050188221</p>
            <p class="red">购买前请确认达到法定饮酒年龄！酒仙网不销售任何含酒精产品给18岁以下人士！</p>
        </div>
    </div>

    <!-- 引入 验证码 -->
    <script src="../js/gVerify.js"></script>

    <!-- 引入第二个验证码 -->
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="../js/VCode.js"></script>

    <script>
        // 切换二维码 / 手机号登陆
        const oLogin = document.querySelectorAll('.changeEr .content1, .changeEr .content2')

        console.log(oLogin)

        oLogin.forEach(function (ele, index) {
            oLogin[index].onclick = () => {
                // for (let i = 0; i < oLogin.length; i++) {
                //     oLogin[i].classList.remove('on')
                // }

                // oLogin[index].classList.add('on')


                toggleClass(index)

                console.log(oLogin)
            }
        })

        // oLogin[].onclick = () => {
        //     for (let i = 0; i < oLogin.length; i++) {
        //         oLogin[i].classList.remove('on')
        //     }

        //     oLogin[0].classList.add('on')

        //     toggleClass()

        //     console.log(oLogin)
        // }

        // 点击切换二维码函数



        function toggleClass(index) {
            // oLogin[index].classList.remove('on')
            oLogin[index].classList.toggle('on')
            // oLogin[1].classList.toggle('on')
            // oContent1.classList.toggle('on')
            // oContent2.classList.toggle('on')
        }


    </script>

    <!-- 帮助中心划入 -->
    <script src="../js/helpCenter.js"></script>

    <!-- 正则JS引入 -->
    <script src="../js/loginRexEP.js"></script>

    <script>

        // 验证码
        let verifyCode = new GVerify("v_container")

        // 点击账号、手机切换登陆状态

        const oA = document.querySelectorAll('.first a')
        const oAcontLogin = document.querySelector('.acontLogin')
        const oUl = document.querySelectorAll('.second ul')
        const oI = document.querySelectorAll('.erweimaImg i, .bottom i')

        oA.forEach(function (ele, index) {

            oA[index].onclick = function () {
                // console.log(index)
                for (let i = 0; i < oA.length; i++) {
                    oA[i].className = ''
                    oUl[i].classList.remove('on')

                }
                oA[index].className = 'on'
                oUl[index].classList.add('on')
            }
        })

        // oI.forEach(function (ele, index) {
        //     oI[index].onmouseover = () => {
        //         for (let i = 0; i < oI.length; i++) {
        //             oI[i].style.display = 'none'
        //         }
        //         oI[index].classList.add('on')
        //     }
        // })


        // 鼠标移动显示二维码样式

        // const oMove = document.querySelector('.move')

        // function move(obj, attr, target) {
        //     //非行间样式

        //     let l = parseInt(getComputedStyle(obj)[attr])

        //     let timer = setInterval(() => {
        //         l -= 10
        //         obj.style[attr] = l + 'px'
        //         if (l >= target) {
        //             clearInterval(timer)
        //             obj.style[attr] = target + 'px'
        //         }
        //     }, 30)
        // }

        // document.addEventListener('mouseover', function () {
        //     move(oMove[0], 'left', 200)
        //     // move(aBox[1], 'top', 400)
        // })

    </script>
</body>

</html>